/* eslint-disable react/no-children-prop */
import Auth from '@/components/auth';
// import kbdApprovalService from '@/services/assessmentTracking/testTable';
import { aplanQuery } from '@/services/demo';
import { UploadOutlined } from '@ant-design/icons';
import { EllipsisTableText, FormTable, IFormItem } from '@bud-fe/react-pc-ui';
import { useMount } from 'ahooks';
import { Button, Space } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { ReactNode, useEffect, useState } from 'react';
import styles from './index.module.less';

export const AUTH_BTN_CODE = {
  /** 行动计划/跟进事项查询 */
  actionPlanMgt: {
    /** 导出 */
    export: 'action-plan-export',
  },
};

export interface IAplanQueryRespItem {
  id: number;
  employeeNo: string;
  employeeName: string;
  position: string;
  planCatlog: string;
  planCatLogId: number;
  salesName: string;
  planStatus: number;
  postId: number;
  planDesc: string;
  startTime: string;
  endTime: string;
  completeTime: string;
  overtimeIndex: number;
  planType: number;
}

export default () => {
  useMount(() => {});

  const { search, tableProps, form } = FormTable.useABIFormTable({
    // service: kbdApprovalService.taskTrackList,
    service: aplanQuery,
    pagingParamsFormatter({ current, pageSize }) {
      return { pageNum: current, pageSize };
    },
    multiple: true,
    cacheKey: 'action-plan/list',
  });

  const optionRender = (): ReactNode[] => {
    return [
      <Space>
        <Button type="primary" onClick={search.submit}>
          查询
        </Button>
        <Button type="default" onClick={() => search.reset()}>
          重置
        </Button>
        <Auth key={AUTH_BTN_CODE.actionPlanMgt.export} authKey={AUTH_BTN_CODE.actionPlanMgt.export}>
          <Button
            type="primary"
            // onClick={async () => {
            //   const idsParams =
            //     Array.isArray(tableProps?.rowSelection?.selectedRowKeys) &&
            //     tableProps?.rowSelection?.selectedRowKeys.length
            //       ? { ids: tableProps?.rowSelection?.selectedRowKeys }
            //       : undefined;
            //   download(
            //     await exportAplan({
            //       ...searchParamsFormatter(form.getFieldsValue()),
            //       ...idsParams,
            //     }),
            //   );
            // }}
          >
            导出
          </Button>
        </Auth>
      </Space>,
    ];
  };

  const tableCol: ColumnsType<IAplanQueryRespItem> = [
    {
      title: '姓名',
      dataIndex: 'id',
    },
    {
      title: '工号',
      dataIndex: 'employeeNo',
    },
    {
      title: '职位',
      dataIndex: 'position',
    },
    {
      title: '类型',
      dataIndex: 'planType',
    },
    {
      title: '分类',
      dataIndex: 'planCatlog',
    },
    {
      title: '对象',
      dataIndex: 'salesName',
      align: 'center',
      render: (v) => (v ? EllipsisTableText()(v) : '-'),
    },
    {
      title: '进度',
      dataIndex: 'planStatus',
    },
    {
      title: '超时状态',
      dataIndex: 'overtimeIndex',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      defaultSortOrder: 'descend',
      sortDirections: ['ascend', 'descend', 'ascend'],
    },
    {
      title: '截止时间',
      dataIndex: 'endTime',
    },
    {
      title: '实际完成时间',
      dataIndex: 'completeTime',
      align: 'center',
      // render: (v, record) => {
      //   // 显示业务员的实际完成时间，未完成状态该字段显示为“-”
      //   return getMapIndex(mapPlanStatus, '未完成') === String(record.planStatus)
      //     ? '-'
      //     : moment.utc(v).format('YYYY-MM-DD');
      // },
    },
    {
      title: '内容',
      dataIndex: 'planDesc',
      render: EllipsisTableText(),
    },
  ];

  const searchFormCol: IFormItem[] = [
    {
      type: 'input',
      name: 'employeeName',
      label: '人员:',
      placeholder: '请输入人员姓名/工号',
    },

    {
      type: 'select',
      name: 'planCatlogId',
      label: '任务类型', // 之前叫 "行动计划分类"
      placeholder: '全部',
    },
    {
      type: 'select',
      name: 'planStatus',
      label: '进度',
      placeholder: '全部',
    },
    {
      type: 'select',
      name: 'overtimeIndex',
      label: '是否超时',
      placeholder: '全部',
      fieldProps: {
        allowClear: true,
      },
    },
    {
      type: 'select',
      name: 'planType',
      label: '记录类别：', // 以前叫类型
      placeholder: '全部',
      fieldProps: {
        allowClear: true,
      },
    },
  ];

  const renderActionBar = () => (
    <>
      {/* <Auth authKey={AUTH_BTN_CODE.maneuveringTask.ADD}> */}
      <Button type="primary" ghost icon={<UploadOutlined />}>
        导出
      </Button>
      {/* </Auth> */}
    </>
  );

  useEffect(() => {
    // console.log(TaskTrackListType);
  }, []);

  return (
    <div className={styles['page-poc-mgt']}>
      <FormTable
        // queryFilterProps={{ optionRender, labelCol: { style: { width: '70px' } } }}
        rowKey="id"
        tableCol={tableCol}
        searchFormCol={searchFormCol}
        actionBar={renderActionBar()}
        search={search}
        form={form}
        // {...newTableProps}
        // {...useCustomPagination(tableProps)}
      />
    </div>
  );
};
